<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="author" content="Anthony Federico">
    <title>Stocktalk</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.6.1/plottable.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>        
    <script src="js/helpers.js"></script>
    <script src="js/charting.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.6.1/plottable.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.css">
  </head>
  <body>
    <br>
    <div class="ui padded center aligned grid">
      <div class="column" style="height:600px">
        <div class="ui tiny header">Volume (Randomly Simulated)</div>
        <div class="ui icon buttons" style="margin-right:20px">
          <button data-n="30" data-tf="m" class="ui basic button tf volume">30 m</button>
          <button data-n="1"  data-tf="h" class="ui basic button tf volume">1 h</button>
          <button data-n="4"  data-tf="h" class="ui basic button tf volume">4 h</button>
          <button data-n="12" data-tf="h" class="ui basic button tf volume">12 h</button>
          <button data-n="1"  data-tf="d" class="ui basic button tf volume">1 d</button>
          <button data-n="3"  data-tf="d" class="ui basic button tf volume">3 d</button>
          <button data-n="0"  data-tf="r" class="ui basic button tf volume">Reset</button>
        </div>
        <div class="ui dropdown volume query">
          <div class="text"></div>
          <i class="dropdown icon"></i>
        </div>
        <div id="volume-placeholder"></div>
      </div>
    </div>
    <div class="ui padded center aligned grid">
      <div class="column" style="height:600px">
        <div class="ui tiny header">Sentiment (Randomly Simulated)</div>
        <div class="ui icon buttons" style="margin-right:20px">
          <button data-n="30" data-tf="m" class="ui basic button tf sentiment">30 m</button>
          <button data-n="1"  data-tf="h" class="ui basic button tf sentiment">1 h</button>
          <button data-n="4"  data-tf="h" class="ui basic button tf sentiment">4 h</button>
          <button data-n="12" data-tf="h" class="ui basic button tf sentiment">12 h</button>
          <button data-n="1"  data-tf="d" class="ui basic button tf sentiment">1 d</button>
          <button data-n="3"  data-tf="d" class="ui basic button tf sentiment">3 d</button>
          <button data-n="0"  data-tf="r" class="ui basic button tf sentiment">Reset</button>
        </div>
        <div class="ui dropdown sentiment query">
          <div class="text"></div>
          <i class="dropdown icon"></i>
        </div>
        <div id="sentiment-placeholder"></div>
      </div>
    </div>
  </body>
</html>

<script>
// Simulating random volume and sentiment data
var start = new Date()
start.setDate(start.getDate()-33)

var selected_volume
var volume = {'ETH': randomVolume(2000, start),
              'LTC': randomVolume(2000, start),
              'BTC': randomVolume(2000, start),
              'XRP': randomVolume(2000, start),
              'XLM': randomVolume(2000, start)}
selected_volume = volume[Object.keys(volume)[0]]
newChart(resample(selected_volume, 4, 'h', sum), 'volume')

var selected_sentiment
var sentiment = {'ETH': randomSentiment(2000, start),
                 'LTC': randomSentiment(2000, start),
                 'BTC': randomSentiment(2000, start),
                 'XRP': randomSentiment(2000, start),
                 'XLM': randomSentiment(2000, start)}
selected_sentiment = sentiment[Object.keys(sentiment)[0]]
newChart(resample(selected_sentiment, 12, 'h', avg), 'sentiment')

/*
Initializes the dropdown options and updates with the selected
dataset whenever a change is detected. This also ends up initializing
the chart data as a change is detected when instanced.
*/

var init_volume = true
var init_sentiment = true

// ------------------ //
//   HANDLING VOLUME  //
// ------------------ //
volume_selection = []
voume_queries = Object.keys(volume)
for (var i = 0; i < voume_queries.length; i++) {
    volume_selection.push({name: voume_queries[i], value: voume_queries[i]})
}
volume_selection[0]['selected'] = true;
$('.ui.dropdown.volume').dropdown({
  values: volume_selection,
  onChange: function(value) {
    if (typeof(volume[value]) != 'undefined') {
      $("#volume-placeholder").empty();
      selected_volume = volume[value]
      if (init_volume) {
        newChart(resample(selected_volume, 4, 'h', sum), 'volume')
        init_volume = false
      } else {
        newChart(selected_volume, 'volume')
      }
    }
  }
});
$(document).on("click", ".tf.volume", function() {
    n = $(this).attr('data-n')
    tf = $(this).attr('data-tf')
    if (tf == 'r') {
        resampled_data = selected_volume
    }
    else {
        resampled_data = resample(selected_volume, n, tf, sum)
    }
    $("#volume-placeholder").empty();
    newChart(resampled_data, 'volume')
});

// ------------------ //
// HANDLING SENTIMENT //
// ------------------ //
sentiment_selection = []
sentiment_queries = Object.keys(sentiment)
for (var i = 0; i < sentiment_queries.length; i++) {
    sentiment_selection.push({name: sentiment_queries[i], value: sentiment_queries[i]})
}
sentiment_selection[0]['selected'] = true;
$('.ui.dropdown.sentiment').dropdown({
  values: sentiment_selection,
  onChange: function(value) {
    if (typeof(sentiment[value]) != 'undefined') {
      $("#sentiment-placeholder").empty();
      selected_sentiment = sentiment[value]
      if (init_sentiment) {
        newChart(resample(selected_sentiment, 12, 'h', avg), 'sentiment')
        init_sentiment = false
      } else {
        newChart(selected_sentiment, 'sentiment')
      }
    }
  }
});
$(document).on("click", ".tf.sentiment", function() {
    n = $(this).attr('data-n')
    tf = $(this).attr('data-tf')
    if (tf == 'r') {
        resampled_data = selected_sentiment
    }
    else {
        resampled_data = resample(selected_sentiment, n, tf, avg)
    }
    $("#sentiment-placeholder").empty();
    newChart(resampled_data, 'sentiment')
});
</script>